<template>
  <el-card shadow="never" class="addCard">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="130px"
      class="demo-ruleForm"
    >
      <el-form-item label="分类名称:" prop="pass">
        <el-input v-model="ruleForm.pass" />
      </el-form-item>
      <el-form-item label="上级分类:" prop="pass">
        <el-select v-model="SuperiorTypeVal" class="m-2" placeholder="Select">
          <el-option
            v-for="item in userList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="数量单位:" prop="pass">
        <el-input v-model="ruleForm.pass" />
      </el-form-item>
      <el-form-item label="排序:" prop="pass">
        <el-input v-model="ruleForm.pass" />
      </el-form-item>
      <el-form-item label="是否显示:" prop="pass">
        <el-radio-group v-model="radio2" class="ml-4">
          <el-radio label="1">是</el-radio>
          <el-radio label="2">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否显示在导航栏:" prop="pass">
        <el-radio-group v-model="radio2" class="ml-4">
          <el-radio label="1">是</el-radio>
          <el-radio label="2">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="分类图标:" prop="pass">
        <el-upload
          v-model:file-list="fileList"
          class="upload-demo"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          multiple
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :limit="3"
          :on-exceed="handleExceed"
        >
          <el-button type="primary">点击上传</el-button>
          <template #tip>
            <div class="el-upload__tip">只能上传jpg/png文件，且不超过100kb</div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="筛选属性:" prop="pass">
        <el-select
          v-model="screeningattributeVal"
          class="m-2"
          placeholder="Select"
        >
          <el-option
            v-for="item in screeningattributeArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button style="margin-left: 20px">删除</el-button>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary">新增</el-button>
      </el-form-item>
      <el-form-item label="关键词:" prop="pass">
        <el-input v-model="ruleForm.pass" />
      </el-form-item>
      <el-form-item label="分类描述:" prop="pass">
        <el-input type="textarea" v-model="ruleForm.pass" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >提交</el-button
        >
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { FormInstance, ElMessage, ElMessageBox } from "element-plus";
import type { UploadProps, UploadUserFile } from "element-plus";
import * as http from "./api/http";
import { useTableFn } from "@/hooks/component/useTable";
// 下拉
const SuperiorTypeVal = ref();
const screeningattributeVal = ref("");
const SuperiorTypeArr = ref([]);
const screeningattributeArr = ref<IWithAttrDatum>([]);
// 单选
const radio2 = ref("1");
// 上传
const fileList = ref<UploadUserFile[]>([
  //   {
  //     name: "element-plus-logo.svg",
  //     url: "https://element-plus.org/images/element-plus-logo.svg",
  //   },
]);

const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
  console.log(file, uploadFiles);
};

const handlePreview: UploadProps["onPreview"] = (uploadFile) => {
  console.log(uploadFile);
};

const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  );
};

const beforeRemove: UploadProps["beforeRemove"] = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `Cancel the transfert of ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  );
};
// 表单
const ruleFormRef = ref<FormInstance>();

const checkAge = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error("Please input the age"));
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error("Please input digits"));
    } else {
      if (value < 18) {
        callback(new Error("Age must be greater than 18"));
      } else {
        callback();
      }
    }
  }, 1000);
};

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("Please input the password"));
  } else {
    if (ruleForm.checkPass !== "") {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField("checkPass", () => null);
    }
    callback();
  }
};
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("Please input the password again"));
  } else if (value !== ruleForm.pass) {
    callback(new Error("Two inputs don't match!"));
  } else {
    callback();
  }
};

const ruleForm = reactive({
  pass: "",
  checkPass: "",
  age: "",
});

const rules = reactive({
  pass: [{ validator: validatePass, trigger: "blur" }],
  checkPass: [{ validator: validatePass2, trigger: "blur" }],
  age: [{ validator: checkAge, trigger: "blur" }],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
// 获取数据
let {
  userList,
  paginationParams,
  handleSizeChange,
  handleCurrentChange,
  queryList,
} = useTableFn(http.addProductCate.ProductCategoryList, { pageSize: 100 }, 0);
http.addProductCate.ProductAttributeCategoryListWithAttr().then(res=>{
    
})
</script>

<style lang="less" scoped>
.addCard {
  width: 792px;
  margin: auto;
  padding: 35px 35px 15px;
  box-sizing: border-box;
}
</style>
